<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue3</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="root">
      <suspense>
        <template #default>
          <div>
            <async-component
              v-model:name.ling="name"
              v-model:name2.ling2="name"
            ></async-component>
            <base-input label="aaa" value="1"></base-input>
          </div>
        </template>

        <template #fallback>
          <p>{{ name }}</p>
        </template>
      </suspense>

      <teleport to="#other">
        <p>Other, {{ name }}</p>
      </teleport>
      <teleport to="#other">
        <p>Other2, {{ name }}</p>
      </teleport>
    </div>

    <div id="other"></div>

    <script>
      const { createApp, defineAsyncComponent, h } = Vue;
      const app = createApp({
        data() {
          return {
            name: "Hello vue3",
          };
        },
      });

      const AsyncComp = defineAsyncComponent(
        () =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve({
                  // inheritAttrs: false,
                  props: {
                    name: {
                      type: String,
                    },
                    name2: {
                      type: String,
                    },
                  },
                  async setup(props, context) {
                    console.log(props.name);
                    console.log(props.name2);
                    console.log({ ...context.attrs });
                    return () => h("div", {}, "你好");
                  },
                });
            }, 1000 * 3);
          })
      );

      app.component("base-input", {
        inheritAttrs: false,
        props: ["label", "value"],
        template: `<p> {{ label }} - {{ value }} </p>`,
      });

      app.component("async-component", AsyncComp);

      app.mount("#root");
    </script>
  </body>
</html>
